<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的显示模式</title>
  <style>
    div{
      width: 200px;
      height: 200px;
      font-size: 20px;
      /* 块元素改行内块元素，CSS可控制宽高且可一行显示 */
      display: inline-block;
    }
    #d1{
      background-color: pink;
    }
    #d2{
      background-color: palegreen;
    }
    #d3{
      background-color: blue;
    }
    a{
      font-size: 20px;
      width: 200px;
      height: 200px;
      /* 行内元素改块元素，css可控制宽高 */
      /* 这时候点击整个框都能完成超链接跳转 */
      display: block;
    }
    #s1{
      background-color: pink;
    }
    #s2{
      background-color: palegreen;
    }
    #s3{
      background-color: blue;
    }
  </style>

</head>
<body>
<!--
块元素:
  在页面中独占一行，不会与任何元素共用一行，是从上到下排列的【可以通过CSS设置宽高】
  常用的有:html,body,h1~h6,hr,p,pre,div,ul,ol,li,dl,dt,dd,table,tbody,thead,tfoot,tr,caption,form,option

行内元素:
  在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列【无法通过CSS设置宽高】。
  常用的有:br,em,strong,sup,sub,del,ins,a,label

行内块元素:
  在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从左到右排列【可以通过CSS设置宽高】。
  常用的有:img,td,th,input,textarea,select,button,iframe
-->


<!--可以通过CSS的display属性可以修改元素的默认显示模式,常用值如下:
    none:元素会被隐藏
    block:元素将作为块级元素显示
    inline:元素将作为内联元素显示
    inline-block:元素将作为块元素显示
-->
<div id="d1">你好1</div>
<div id="d2">你好2</div>
<div id="d3">你好3</div>
<hr>
<a id="s1" href="https://www.baidu.com">去百度</a>
<a id="s2" href="https://www.jd.com">去京东</a>
<a id="s3" href="https://www.toutiao.com">去头条</a>
</body>
</html>